/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
*{
  margin: 0px;
  padding: 0px;
}
*, 
  ::before, 
  ::after{
  box-sizing: border-box;
  border-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}
body {
    /* antialiased 字体平滑 */
    --tw-text-opacity: 1;
    color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark body{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
body{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark body{
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
body{
  margin: 0px;
  width: 100%;
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    direction: ltr;
    /* 像素较小时字体会拼接在一起 */
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}
main{
  display: block;
}
svg{
  display: inline-block;
}
hr{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark hr{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
hr{
  border-width: 0px;
  border-top-width: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6{
  z-index: -10;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -2rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  line-height: 1.25rem;
}
h1{
  margin-top: -3rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
h2{
  font-size: 1.5rem;
  line-height: 2rem;
  line-height: 1.25;
}
/* @apply -mt-4 relative; */
h2::before{
  margin-bottom: 1.5rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark h2::before{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
h2::before {
      content: ' ';
}
h3{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
h4{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
h5{
  font-size: 1rem;
  line-height: 1.5rem;
}
h6{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6, 
  strong, 
  b{
  font-weight: 600;
}
a:active, 
  a:link, 
  a:focus, 
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark a:active, .dark 
  a:link, .dark 
  a:focus, .dark 
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
p, 
  ol, 
  ul, 
  table{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 2rem;
}
a,
  area,
  button,
  [role="button"],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
    background-color: transparent;
    text-decoration-line: none;
}
button{
  font-size: 1rem;
  line-height: 1.5rem;
}
figure{
  margin: 0px;
}
img{
  max-width: 100%;
}
ul, 
  ol{
  padding-left: 1.25rem;
}
ul{
  list-style-type: disc;
}
ol{
  list-style-type: decimal;
}
li > ul, 
  li > ol{
  margin: 0px;
}
table{
  width: 100%;
  overflow-x: auto;
  border-radius: 0.375rem;
    border-collapse: collapse;
}
table tr{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark table tr{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
table tr{
  border-radius: 0.25rem;
}
table th{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 245 / var(--tw-bg-opacity));
  text-align: left;
  font-weight: 600;
}
.dark table th{
  --tw-bg-opacity: 1;
  background-color: rgb(43 49 58 / var(--tw-bg-opacity));
}
table td,  table th{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
table td:not(:last-child),  table th:not(:last-child){
  border-right-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark table td:not(:last-child), .dark  table th:not(:last-child){
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
blockquote{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark blockquote{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
blockquote{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0px;
  margin-right: 0px;
  border-left-width: 4px;
  border-style: solid;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
blockquote > p{
  margin: 0px;
}
pre, code, kbd {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
kbd{
  border-radius: 0.25rem;
  border-width: 1px;
  border-bottom-width: 2px;
  border-color: rgb(156 163 175 / 0.2);
  background-color: rgb(156 163 175 / 0.05);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
form{
  margin: 0px;
}
p > img{
  border-radius: 1rem;
}
li svg{
  vertical-align: middle;
    transform: translateY(-10%);
}
/************** 滚动条 **************/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    --tw-bg-opacity: 1;
    background-color: rgb(73 84 230 / var(--tw-bg-opacity));
}
::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    --tw-bg-opacity: 1;
    background-color: rgb(73 84 230 / var(--tw-bg-opacity));
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
.bulletin-wrapper{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .bulletin-wrapper{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.bulletin-wrapper{
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
}
.dark .bulletin-wrapper{
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
}
.bulletin-wrapper{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .bulletin-wrapper{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.bulletin-wrapper{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark .bulletin-wrapper{
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
.bulletin-wrapper{
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: 10;
  box-sizing: border-box;
  border-radius: 0.25rem;
  min-height: 200px;
  max-height: 660px;
  overflow-y: auto;
}
.bulletin-wrapper .bulletin-title{
  position: relative;
  margin: 0px;
  box-sizing: border-box;
  --tw-bg-opacity: 1;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity));
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.bulletin-wrapper .bulletin-title .btn-close{
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0.5rem;
  margin-top: auto;
  margin-bottom: auto;
  display: inline-block;
  height: 1rem;
  width: 1rem;
  cursor: pointer;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
      width: 22px;
      height: 22px;
}
.bulletin-wrapper .bulletin-title .btn-close svg{
  fill: currentColor;
}
.bulletin-wrapper .bulletin-content{
  box-sizing: border-box;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
.bulletin-wrapper .bulletin-content .btn-group{
  text-align: center;
}
.bulletin-wrapper .bulletin-content .btn{
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  cursor: pointer;
  border-radius: 50%;
  --tw-bg-opacity: 1;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity));
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
      line-height: 3.5rem;
}
.bulletin-wrapper .bulletin-content .btn:not(:first-child){
  margin-left: 0.5rem;
}
.bulletin-wrapper .bulletin-content h5{
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-top: 0px;
}
.bulletin-wrapper .bulletin-content img{
  width: 100%;
}
.bulletin-wrapper .bulletin-content hr{
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
}
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
*{
  margin: 0px;
  padding: 0px;
}
*, 
  ::before, 
  ::after{
  box-sizing: border-box;
  border-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
body {
    /* antialiased 字体平滑 */
    --tw-text-opacity: 1;
    color: rgb(44 62 80 / var(--tw-text-opacity));
  }
.dark body{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
body{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark body{
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
body{
  margin: 0px;
  width: 100%;
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    direction: ltr;
    /* 像素较小时字体会拼接在一起 */
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}
main{
  display: block;
}
svg{
  display: inline-block;
}
hr{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark hr{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
hr{
  border-width: 0px;
  border-top-width: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6{
  z-index: -10;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -2rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  line-height: 1.25rem;
}
h1{
  margin-top: -3rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
h2{
  font-size: 1.5rem;
  line-height: 2rem;
  line-height: 1.25;
}
/* @apply -mt-4 relative; */
h2::before{
  margin-bottom: 1.5rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark h2::before{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
h2::before {
      content: ' ';
    }
h3{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
h4{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
h5{
  font-size: 1rem;
  line-height: 1.5rem;
}
h6{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6, 
  strong, 
  b{
  font-weight: 600;
}
a:active, 
  a:link, 
  a:focus, 
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark a:active, .dark 
  a:link, .dark 
  a:focus, .dark 
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
p, 
  ol, 
  ul, 
  table{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 2rem;
}
a,
  area,
  button,
  [role="button"],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
    background-color: transparent;
    text-decoration-line: none;
  }
button{
  font-size: 1rem;
  line-height: 1.5rem;
}
figure{
  margin: 0px;
}
img{
  max-width: 100%;
}
ul, 
  ol{
  padding-left: 1.25rem;
}
ul{
  list-style-type: disc;
}
ol{
  list-style-type: decimal;
}
li > ul, 
  li > ol{
  margin: 0px;
}
table{
  width: 100%;
  overflow-x: auto;
  border-radius: 0.375rem;
    border-collapse: collapse;
}
table tr{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark table tr{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
table tr{
  border-radius: 0.25rem;
}
table th{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 245 / var(--tw-bg-opacity));
  text-align: left;
  font-weight: 600;
}
.dark table th{
  --tw-bg-opacity: 1;
  background-color: rgb(43 49 58 / var(--tw-bg-opacity));
}
table td,  table th{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
table td:not(:last-child),  table th:not(:last-child){
  border-right-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark table td:not(:last-child), .dark  table th:not(:last-child){
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
blockquote{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark blockquote{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
blockquote{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0px;
  margin-right: 0px;
  border-left-width: 4px;
  border-style: solid;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
blockquote > p{
  margin: 0px;
}
pre, code, kbd {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  }
kbd{
  border-radius: 0.25rem;
  border-width: 1px;
  border-bottom-width: 2px;
  border-color: rgb(156 163 175 / 0.2);
  background-color: rgb(156 163 175 / 0.05);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
form{
  margin: 0px;
}
p > img{
  border-radius: 1rem;
}
li svg{
  vertical-align: middle;
    transform: translateY(-10%);
}
/************** 滚动条 **************/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0);
  }
::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    --tw-bg-opacity: 1;
    background-color: rgb(73 84 230 / var(--tw-bg-opacity));
  }
::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    --tw-bg-opacity: 1;
    background-color: rgb(73 84 230 / var(--tw-bg-opacity));
  }
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
      background: rgb(220, 220, 220);
  }
}
.v {
  font-size:16px;
  text-align: left;
}
.v * {
      box-sizing: border-box;
      line-height:2;
      transition: all .3s ease;
  }
.v hr{
      margin: .825em 0;
      border-color:#f6f6f6;
      border-style: dashed;
  }
.v.hide-avatar .vimg{display:none;}
.v a{
      position:relative;
      cursor: pointer;
      color: #1abc9c;
      text-decoration:none;
      display:inline-block;
  }
.v a:hover {
          color: #D7191A;
      }
.v pre,.v code{
      background-color: #f6f6f6;
      color: #555;
      padding: 0.2em 0.4em;
      border-radius: 3px;
      font-size: 85%;
      margin: 0;
      font-family: "Source Code Pro", "courier new", "Input Mono", "PT Mono","SFMono-Regular",Consolas,Monaco,Menlo,"PingFang SC","Liberation Mono","Microsoft YaHei",Courier，monospace;
  }
.v pre{
      padding: 10px;
      overflow: auto;
      line-height: 1.45;
  }
.v pre code{
          padding:0;
          background:transparent;
          white-space: pre-wrap;
          word-break: keep-all;
      }
.v blockquote{
      color: #666;
      margin: .5em 0;
      padding: 0 0 0 1em ;
      border-left: 8px solid rgba(238, 238, 238, 0.5);
  }
.v .vinput {
      border: none;
      resize: none;
      outline: none;
      padding: 10px 5px;
      max-width: 100%;
      font-size: .775em;
  }
.v input[type='checkbox'],.v input[type='radio']{
      display:inline-block;
      vertical-align: middle;
      margin-top:-2px;
  }
.v .vwrap {
      border: 1px solid #f0f0f0;
      border-radius: 4px;
      margin-bottom: 10px;
      overflow: hidden;
      position: relative;
      padding: 10px;
  }
.v .vwrap input {
          background: transparent;
      }
.v .vwrap .vedit {
          position: relative;
          padding-top:10px;
      }
.v .vwrap .vedit .vctrl {
          text-align: right;
          font-size: 12px;
      }
.v .vwrap .vedit .vctrl span {
          padding: 10px;
          display: inline-block;
          vertical-align: middle;
          cursor: pointer;
      }
.v .vwrap .vedit .vemojis {
          display: none;
          font-size: 18px;
          text-align: justify;
          max-height: 145px;
          overflow: auto;
          margin-bottom: 10px;
          box-shadow: 0px 0 1px #f0f0f0;
      }
.v .vwrap .vedit .vemojis i {
          font-style: normal;
          padding: 7px 0;
          width: 38px;
          cursor: pointer;
          text-align: center;
          display: inline-block;
          vertical-align: middle;
      }
.v .vwrap .vedit .vpreview {
          padding: 7px;
          box-shadow: 0px 0 1px #f0f0f0;
      }
.v .vwrap .vedit .vpreview img,.v .vwrap .vedit .vpreview frame,.v .vwrap .vedit .vpreview iframe{
              max-width: 100%;
              border:none;
          }
.v .vwrap .vheader .vinput {
              width: 33.33%;
              border-bottom: 1px #dedede dashed;
          }
.v .vwrap .vheader.item2 .vinput {
              width: 50%;
          }
.v .vwrap .vheader.item1 .vinput {
              width: 100%;
          }
.v .vwrap .vheader .vinput:focus {
              border-bottom-color: #eb5055;
          }
@media screen and (max-width:520px) {
              .v .vwrap .vheader .vinput {
                  width: 100%;
              }
              .v .vwrap .vheader.item2 .vinput {
                  width: 100%;
              }
          }
.v .vwrap .vcontrol {
          font-size: 0;
          padding-top: 15px;
      }
.v .vwrap .vcontrol .col {
              display: inline-block;
              font-size: 16px;
              vertical-align: middle;
              color: #ccc;
          }
.v .vwrap .vcontrol .col.text-right {
                  text-align: right;
              }
.v .vwrap .vcontrol .col svg {
                  margin-right: 2px;
                  overflow: hidden;
                  fill: currentColor;
                  vertical-align: middle;
              }
.v .vwrap .vcontrol .col.col-20 {
                  width: 20%;
              }
.v .vwrap .vcontrol .col.col-40 {
                  width: 40%;
              }
.v .vwrap .vcontrol .col.col-60 {
                  width: 60%;
              }
.v .vwrap .vcontrol .col.col-80 {
                  width: 80%;
              }
.v .vwrap .vcontrol .col.split {
                  width: 50%;
              }
.v .vwrap .vmark {
          position: absolute;
          background: rgba(0, 0, 0, .65);
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
      }
.v .vwrap .vmark .valert {
              padding-top: 3em;
          }
.v .vwrap .vmark .valert .vtext {
                  color: #fff;
                  padding: 1em 0;
              }
.v .vwrap .vmark .valert .vcode {
                  width: 4.6875em;
                  border-radius: .3125em;
                  padding: .5em;
                  background: #dedede;
              }
.v .vwrap .vmark .valert .vcode:focus {
                      border-color: #3090e4;
                      background-color: #fff;
                  }
@media screen and(max-width:720px) {
              .v .vwrap .vmark .valert {
                  padding-top: 5.5em;
              }
                  .v .vwrap .vmark .valert .vtext {
                      color: #fff;
                      padding: 1em 0;
                  }
          }
.v .power {
      color: #999;
      font-size: .75em;
      padding:.5em 0;
  }
.v .power a {
          font-size: .75em;
      }
.v .vinfo {
      font-size: 0;
      padding: 5px;
  }
.v .vinfo .col {
          font-size: 16px;
          display: inline-block;
          width: 50%;
          vertical-align: middle;
      }
.v .vinfo .vcount .vnum {
              font-weight: 600;
              font-size: 1.25em;
          }
.v a {
      text-decoration: none;
      color: #555;
  }
.v a:hover {
          color: #222;
      }
.v ul,.v ol {
      padding: 0;
      margin-left: 1.25em;
  }
.v .txt-center {
      text-align: center;
  }
.v .txt-right {
      text-align: right;
  }
.v .pd5 {
      padding: 5px;
  }
.v .pd10 {
      padding: 10px;
  }
.v .veditor {
      width: 100%;
      min-height: 8.75em;
      font-size: .875em;
      resize: vertical;
      transition:all .25s ease;
      --tw-text-opacity: 1;
      color: rgb(44 62 80 / var(--tw-text-opacity));
  }
.dark .v .veditor{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.v .veditor{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .v .veditor{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.v .vbtn {
      transition-duration: .4s;
      text-align: center;
      color: #313131;
      border: 1px solid #ededed;
      border-radius: .3em;
      display: inline-block;
      background: #ededed;
      margin-bottom: 0;
      font-weight: 400;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      white-space: nowrap;
      padding: .5em 1.25em;
      font-size: .875em;
      line-height: 1.42857143;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
      outline: none;
  }
.v .vbtn+.vbtn {
          margin-left: 1.25em;
      }
.v .vbtn:active,
  .v .vbtn:hover {
      color: #3090e4;
      border-color: #3090e4;
      background-color: #fff;
  }
.v .vempty {
      padding: 1.25em;
      text-align: center;
      color: #999;
  }
.v .vlist {
      width: 100%;
  }
.v .vlist .vcard {
          padding-top: 1.5em;
          position: relative;
          display: block;

      }
.v .vlist .vcard:after {
              content: '';
              clear: both;
              display: block;
          }
.v .vlist .vcard .vimg {
              width: 3.125em;
              height: 3.125em;
              float: left;
              border-radius: 50%;
              margin-right: .7525em;
              border:1px solid #f5f5f5;
              padding:.125em;
          }
@media screen and (max-width:720px) {
              .v .vlist .vcard .vimg {
                  width: 2.5em;
                  height: 2.5em;
              }
          }
.v .vlist .vcard .vhead {
              line-height: 1.5;
              margin-top: 0;
          }
.v .vlist .vcard .vhead .vnick {
                  position:relative;
                  font-size: .875em;
                  font-weight: 500;
                  margin-right: .875em;
                  cursor: pointer;
                  color: #1abc9c;
                  text-decoration:none;
                  display:inline-block;
              }
.v .vlist .vcard .vhead .vnick:hover {
                      color: #D7191A;
                  }
.v .vlist .vcard .vhead .vsys {
                  display: inline-block;
                  padding: .2em .5em;
                  background: #ededed;
                  color: #b3b1b1;
                  font-size: .75em;
                  border-radius: .2em;
                  margin-right: .3em;
              }
@media screen and (max-width:520px) {
                  .v .vlist .vcard .vhead .vsys {
                      display: none;
                  }
              }
.v .vlist .vcard .vh {
              overflow: hidden;
              padding-bottom: .5em;
              border-bottom: 1px dashed #f5f5f5;
          }
.v .vlist .vcard .vh .vtime {
                  color: #b3b3b3;
                  font-size: .75em;
                  margin-right: .875em;
              }
.v .vlist .vcard .vh .vmeta {
                  line-height:1;
                  position: relative;
              }
.v .vlist .vcard .vh .vmeta .vat {
                      font-size: .8125em;
                      color: #ef2f11;
                      cursor: pointer;
                      float:right;
                  }
.v .vlist .vcard:last-child .vh{
                  border-bottom:none;
              }
.v .vlist .vcard .vcontent {
              word-wrap: break-word;
              word-break: break-all;
              text-align: justify;
              color: #4A4A4A;
              font-size: .875em;
              line-height: 2;
              position: relative;
              margin-bottom: .75em;
              padding-top: .625em;
          }
.v .vlist .vcard .vcontent img,.v .vlist .vcard .vcontent iframe,.v .vlist .vcard .vcontent frame {
                  max-width: 100%;
                  border:none;
              }
.v .vlist .vcard .vcontent.expand {
                  cursor: pointer;
                  max-height: 11.25em;
                  overflow: hidden;
              }
.v .vlist .vcard .vcontent.expand:before {
                      display: block;
                      content: "";
                      position: absolute;
                      width: 100%;
                      left: 0;
                      top: 0;
                      bottom: 3.15em;
                      pointer-events: none;
                      background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9));
                  }
.v .vlist .vcard .vcontent.expand:after {
                      display: block;
                      content: "Click on expand";
                      text-align: center;
                      color: #828586;
                      position: absolute;
                      width: 100%;
                      height: 3.15em;
                      line-height: 3.15em;
                      left: 0;
                      bottom: 0;
                      pointer-events: none;
                      background: rgba(255, 255, 255, .9);
                  }
.v .vlist .vcard .vquote {
              color: #666;
              margin-top: 1em;
              padding-left: 1em;
              border-left: 1px dashed rgba(238, 238, 238, 0.5);
          }
.v .vlist .vcard .vquote .vimg{
                  width: 2.225em;
                  height: 2.225em;
              }
.v .vpage .vmore{
          margin:1em 0;
      }
.v .clear {
      content: '';
      display: block;
      clear: both;
  }
.v .vloading {
      position: relative;
      padding: 20px;
      display: block;
      height: 80px;
  }
.v .vloading::before {
      box-sizing: border-box;
      content: '';
      position: absolute;
      display: inline-block;
      top: 20px;
      left: 50%;
      margin-left: -20px;
      width: 40px;
      height: 40px;
      border: 6px double rgb(160, 160, 160);
      border-top-color: transparent;
      border-bottom-color: transparent;
      border-radius: 50%;
      animation: spin 1s infinite linear;
  }
.reco-valine-wrapper #valine.v .vbtn{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .reco-valine-wrapper #valine.v .vbtn{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.reco-valine-wrapper #valine.v .vbtn{
  border-radius: 0.25rem;
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vbtn:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 229 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .reco-valine-wrapper #valine.v .vwrap{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.reco-valine-wrapper #valine.v .vwrap{
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .reco-valine-wrapper #valine.v .vwrap{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .reco-valine-wrapper #valine.v .vwrap{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .reco-valine-wrapper #valine.v .vwrap .vheader .vinput{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput{
  border-width: 0px;
  border-bottom-width: 1px;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .reco-valine-wrapper #valine.v .vwrap .vheader .vinput{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .reco-valine-wrapper #valine.v .vwrap .vheader .vinput{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput{
  border-style: dashed;
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:focus{
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark .reco-valine-wrapper #valine.v .vwrap .vheader .vinput:-internal-autofill-selected{
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vicon.actived{
  fill: currentColor;
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vinfo{
  padding-left: 0.5rem;
}
.reco-valine-wrapper #valine.v .vcard .vquote{
  margin-left: 0px;
  border-left-width: 0px;
}
.reco-valine-wrapper #valine.v .vcard .vimg{
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(97 106 229 / var(--tw-border-opacity));
  padding: 0px;
}
.reco-valine-wrapper #valine.v .vcard .vhead .vnick{
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vcard .vhead .vnick::before{
  --tw-bg-opacity: 1;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vh{
  border-bottom-width: 0px;
}
.reco-valine-wrapper #valine.v .vh .vhead .vsys{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .reco-valine-wrapper #valine.v .vh .vhead .vsys{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vhead .vsys{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .reco-valine-wrapper #valine.v .vh .vhead .vsys{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vh .vhead .vsys{
  --tw-text-opacity: 1;
  color: rgb(97 106 229 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vmeta{
  margin-bottom: 1rem;
}
.reco-valine-wrapper #valine.v .vh .vmeta .vat{
  margin-right: 0.375rem;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0px;
  padding-bottom: 0px;
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vmeta .vat:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 229 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .reco-valine-wrapper #valine.v .vh .vcontent{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .reco-valine-wrapper #valine.v .vh .vcontent{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent{
  margin-left: 0.375rem;
  margin-right: 0.375rem;
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 0.25rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.reco-valine-wrapper #valine.v .vh .vcontent p .at{
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .vh .vcontent.expand::before{
  z-index: 10;
        /* background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); */
}
.reco-valine-wrapper #valine.v .vh .vcontent.expand::after{
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v .info{
  padding-right: 0.625rem;
}
.reco-valine-wrapper #valine.v code,    .reco-valine-wrapper #valine.v pre,    .reco-valine-wrapper #valine.v .vbtn{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .reco-valine-wrapper #valine.v code, .dark    .reco-valine-wrapper #valine.v pre, .dark    .reco-valine-wrapper #valine.v .vbtn{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v code,   .reco-valine-wrapper #valine.v pre,   .reco-valine-wrapper #valine.v .vbtn{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .reco-valine-wrapper #valine.v code, .dark   .reco-valine-wrapper #valine.v pre, .dark   .reco-valine-wrapper #valine.v .vbtn{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.reco-valine-wrapper #valine.v a{
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.reco-valine-wrapper #valine.v a::before{
  --tw-bg-opacity: 1;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity));
}
/* 兼容 */
.dark .reco-valine-wrapper #valine.v .vh .vcontent.expand::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
}
.dark .reco-valine-wrapper #valine.v .vh .vcontent.expand::after {
  background: rgba(0, 0, 0, .9);
}
:root {
  --search-bg-color: #ffffff;
  --search-accent-color: #3eaf7c;
  --search-text-color: #2c3e50;
  --search-border-color: #eaecef;

  --search-item-text-color: #5d81a5;
  --search-item-focus-bg-color: #f3f4f5;

  --search-input-width: 8rem;
  --search-result-width: 20rem;
}
.search-box {
  display: inline-block;
  position: relative;
  margin-left: 1rem;
}

.search-box input {
  cursor: text;
  width: var(--search-input-width);
  height: 2rem;
  color: var(--search-text-color);
  display: inline-block;
  border: 1px solid var(--search-border-color);
  border-radius: 2rem;
  font-size: 0.9rem;
  line-height: 2rem;
  padding: 0 0.5rem 0 2rem;
  outline: none;
  transition: all ease 0.3s;
  background: var(--search-bg-color) url('/blog/assets/search.0782d0d1.svg') 0.6rem 0.5rem no-repeat;
  background-size: 1rem;
}

.search-box input:focus {
  cursor: auto;
  border-color: var(--search-accent-color);
}

.search-box .suggestions {
  background: var(--search-bg-color);
  width: var(--search-result-width);
  position: absolute;
  top: 2rem;
  right: 0;
  border: 1px solid var(--search-border-color);
  border-radius: 6px;
  padding: 0.4rem;
  list-style-type: none;
}

.search-box .suggestion {
  line-height: 1.4;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}

.search-box .suggestion.focus {
  background-color: var(--search-item-focus-bg-color);
}

.search-box .suggestion.focus a {
  color: var(--search-accent-color);
}

.search-box .suggestion a {
  white-space: normal;
  color: var(--search-item-text-color);
}

.search-box .suggestion .page-title {
  font-weight: 600;
}

.search-box .suggestion .page-header {
  font-size: 0.9em;
  margin-left: 0.25em;
}

@media (max-width: 720px) {
  .search-box input {
    cursor: pointer;
    width: 0;
    border-color: transparent;
    position: relative;
  }
  .search-box input:focus {
    cursor: text;
    left: 0;
    width: 10rem;
  }
}

@media (max-width: 420px) {
  .search-box input:focus {
    width: 8rem;
  }
  .search-box .suggestions {
    width: calc(100vw - 4rem);
    right: -0.5rem;
  }
}
:root {
  --nprogress-color: #29d;
  --nprogress-z-index: 1031;
}
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: var(--nprogress-color);
  position: fixed;
  z-index: var(--nprogress-z-index);
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
:root {
  --external-link-icon-color: #aaa;
}
.external-link-icon {
  position: relative;
  display: inline-block;
  color: var(--external-link-icon-color);
  vertical-align: middle;
  top: -1px;
}

.external-link-icon-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
:root {
  --back-to-top-z-index: 5;

  --back-to-top-color: #3eaf7c;
  --back-to-top-color-hover: #71cda3;
}
.back-to-top {
  cursor: pointer;
  position: fixed;
  bottom: 2rem;
  right: 2.5rem;
  width: 2rem;
  height: 1.2rem;
  background-color: var(--back-to-top-color);
  -webkit-mask: url('/blog/assets/back-to-top.8efcbe56.svg') no-repeat;
          mask: url('/blog/assets/back-to-top.8efcbe56.svg') no-repeat;
  z-index: var(--back-to-top-z-index);
}

.back-to-top:hover {
  background-color: var(--back-to-top-color-hover);
}

@media (max-width: 959px) {
  .back-to-top {
    display: none;
  }
}

.back-to-top-enter-active,
.back-to-top-leave-active {
  transition: opacity 0.3s;
}

.back-to-top-enter-from,
.back-to-top-leave-to {
  opacity: 0;
}

.badge {
  display: inline-block;
  font-size: 14px;
  height: 18px;
  line-height: 18px;
  border-radius: 3px;
  padding: 0 6px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.badge.tip {
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 229 / var(--tw-bg-opacity));
}
.badge.warning {
  --tw-bg-opacity: 1;
  background-color: rgb(251 155 95 / var(--tw-bg-opacity));
}
.badge.danger {
  --tw-bg-opacity: 1;
  background-color: rgb(242 109 109 / var(--tw-bg-opacity));
}
.badge + .badge {
    margin-left: 5px;
}

.icon-container {
    display: inline-flex
}
.icon-container.left {
    flex-direction: row;
    align-items: center
}
.icon-container.left > .icon-text {
    margin-left: 0.375rem
}
.icon-container.right {
    flex-direction: row-reverse;
    align-items: center
}
.icon-container.right > .icon-text {
    margin-right: 0.375rem
}
.icon-container.top {
    flex-direction: column;
    align-items: center
}
.icon-container.top > .icon-text {
    margin-top: 0.375rem
}
.icon-container.bottom {
    flex-direction: column-reverse;
    align-items: center
}
.icon-container.bottom > .icon-text {
    margin-bottom: 0.375rem
}
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
*{
  margin: 0px;
  padding: 0px;
}
*, 
  ::before, 
  ::after{
  box-sizing: border-box;
  border-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}
body {
    /* antialiased 字体平滑 */
    --tw-text-opacity: 1;
    color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark body{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
body{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark body{
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
body{
  margin: 0px;
  width: 100%;
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    direction: ltr;
    /* 像素较小时字体会拼接在一起 */
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}
main{
  display: block;
}
svg{
  display: inline-block;
}
hr{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark hr{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
hr{
  border-width: 0px;
  border-top-width: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6{
  z-index: -10;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -2rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  line-height: 1.25rem;
}
h1{
  margin-top: -3rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
h2{
  font-size: 1.5rem;
  line-height: 2rem;
  line-height: 1.25;
}
/* @apply -mt-4 relative; */
h2::before{
  margin-bottom: 1.5rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark h2::before{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
h2::before {
      content: ' ';
}
h3{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
h4{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
h5{
  font-size: 1rem;
  line-height: 1.5rem;
}
h6{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6, 
  strong, 
  b{
  font-weight: 600;
}
a:active, 
  a:link, 
  a:focus, 
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark a:active, .dark 
  a:link, .dark 
  a:focus, .dark 
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
p, 
  ol, 
  ul, 
  table{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 2rem;
}
a,
  area,
  button,
  [role="button"],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
    background-color: transparent;
    text-decoration-line: none;
}
button{
  font-size: 1rem;
  line-height: 1.5rem;
}
figure{
  margin: 0px;
}
img{
  max-width: 100%;
}
ul, 
  ol{
  padding-left: 1.25rem;
}
ul{
  list-style-type: disc;
}
ol{
  list-style-type: decimal;
}
li > ul, 
  li > ol{
  margin: 0px;
}
table{
  width: 100%;
  overflow-x: auto;
  border-radius: 0.375rem;
    border-collapse: collapse;
}
table tr{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark table tr{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
table tr{
  border-radius: 0.25rem;
}
table th{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 245 / var(--tw-bg-opacity));
  text-align: left;
  font-weight: 600;
}
.dark table th{
  --tw-bg-opacity: 1;
  background-color: rgb(43 49 58 / var(--tw-bg-opacity));
}
table td,  table th{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
table td:not(:last-child),  table th:not(:last-child){
  border-right-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark table td:not(:last-child), .dark  table th:not(:last-child){
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
blockquote{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark blockquote{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
blockquote{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0px;
  margin-right: 0px;
  border-left-width: 4px;
  border-style: solid;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
blockquote > p{
  margin: 0px;
}
pre, code, kbd {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
kbd{
  border-radius: 0.25rem;
  border-width: 1px;
  border-bottom-width: 2px;
  border-color: rgb(156 163 175 / 0.2);
  background-color: rgb(156 163 175 / 0.05);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
form{
  margin: 0px;
}
p > img{
  border-radius: 1rem;
}
li svg{
  vertical-align: middle;
    transform: translateY(-10%);
}
/************** 滚动条 **************/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    --tw-bg-opacity: 1;
    background-color: rgb(73 84 230 / var(--tw-bg-opacity));
}
::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    --tw-bg-opacity: 1;
    background-color: rgb(73 84 230 / var(--tw-bg-opacity));
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
.code-group{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .code-group{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.code-group{
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .code-group{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.code-group{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .code-group{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.code-group{
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.code-group .code-group__nav .code-group__ul{
  margin-top: 0px;
  margin-bottom: 0px;
  list-style-type: none;
  padding-left: 0px;
}
.code-group .code-group__nav .code-group__ul .code-group__li{
  display: inline-block;
}
.code-group .code-group__nav .code-group__ul .code-group__li button{
  cursor: pointer;
  border-bottom-width: 2px;
  border-style: solid;
  border-color: transparent;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.code-group .code-group__nav .code-group__ul .code-group__li button .icon-container{
  vertical-align: middle;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.code-group .code-group__nav .code-group__ul .code-group__li button.code-group__nav-tab-active{
  --tw-border-opacity: 1 !important;
  border-color: rgb(73 84 230 / var(--tw-border-opacity)) !important;
}
/* 兼容 */
.dark .code-group .code-group__nav .code-group__ul .code-group__li button .icon-container{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}

/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
*{
  margin: 0px;
  padding: 0px;
}
*, 
  ::before, 
  ::after{
  box-sizing: border-box;
  border-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}
body {
    /* antialiased 字体平滑 */
    --tw-text-opacity: 1;
    color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark body{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
body{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark body{
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
body{
  margin: 0px;
  width: 100%;
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    direction: ltr;
    /* 像素较小时字体会拼接在一起 */
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}
main{
  display: block;
}
svg{
  display: inline-block;
}
hr{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark hr{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
hr{
  border-width: 0px;
  border-top-width: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6{
  z-index: -10;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -2rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  line-height: 1.25rem;
}
h1{
  margin-top: -3rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
h2{
  font-size: 1.5rem;
  line-height: 2rem;
  line-height: 1.25;
}
/* @apply -mt-4 relative; */
h2::before{
  margin-bottom: 1.5rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark h2::before{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
h2::before {
      content: ' ';
}
h3{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
h4{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
h5{
  font-size: 1rem;
  line-height: 1.5rem;
}
h6{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6, 
  strong, 
  b{
  font-weight: 600;
}
a:active, 
  a:link, 
  a:focus, 
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark a:active, .dark 
  a:link, .dark 
  a:focus, .dark 
  a:visited{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
p, 
  ol, 
  ul, 
  table{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 2rem;
}
a,
  area,
  button,
  [role="button"],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
    background-color: transparent;
    text-decoration-line: none;
}
button{
  font-size: 1rem;
  line-height: 1.5rem;
}
figure{
  margin: 0px;
}
img{
  max-width: 100%;
}
ul, 
  ol{
  padding-left: 1.25rem;
}
ul{
  list-style-type: disc;
}
ol{
  list-style-type: decimal;
}
li > ul, 
  li > ol{
  margin: 0px;
}
table{
  width: 100%;
  overflow-x: auto;
  border-radius: 0.375rem;
    border-collapse: collapse;
}
table tr{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark table tr{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
table tr{
  border-radius: 0.25rem;
}
table th{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 245 / var(--tw-bg-opacity));
  text-align: left;
  font-weight: 600;
}
.dark table th{
  --tw-bg-opacity: 1;
  background-color: rgb(43 49 58 / var(--tw-bg-opacity));
}
table td,  table th{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
table td:not(:last-child),  table th:not(:last-child){
  border-right-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark table td:not(:last-child), .dark  table th:not(:last-child){
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
blockquote{
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark blockquote{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark blockquote{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
blockquote{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0px;
  margin-right: 0px;
  border-left-width: 4px;
  border-style: solid;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
blockquote > p{
  margin: 0px;
}
pre, code, kbd {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
kbd{
  border-radius: 0.25rem;
  border-width: 1px;
  border-bottom-width: 2px;
  border-color: rgb(156 163 175 / 0.2);
  background-color: rgb(156 163 175 / 0.05);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
form{
  margin: 0px;
}
p > img{
  border-radius: 1rem;
}
li svg{
  vertical-align: middle;
    transform: translateY(-10%);
}
/************** 滚动条 **************/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    --tw-bg-opacity: 1;
    background-color: rgb(73 84 230 / var(--tw-bg-opacity));
}
::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    --tw-bg-opacity: 1;
    background-color: rgb(73 84 230 / var(--tw-bg-opacity));
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
.vue-preview-container{
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .vue-preview-container{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.vue-preview-container{
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .vue-preview-container{
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.vue-preview-container{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .vue-preview-container{
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.vue-preview-container{
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.vue-preview-container .preview-container{
  border-bottom-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.vue-preview-container .preview-container > *{
  margin-left: auto;
  margin-right: auto;
}
.vue-preview-container .code-group{
  margin-top: 0px;
  margin-bottom: 0px;
  border-style: none;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
}
.vue-preview-container .code-group::after{
  display: none;
}
.dark .vue-preview-container .preview-container{
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}

.code-group-item {
  display: none;
  border-top-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .code-group-item {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.code-group-item {
  margin-top: -1px;
}
.code-group-item.code-group-item__active {
  display: block;
}
.code-group-item div[class*="language-"] {
  margin-top: 0px;
  margin-bottom: 0px;
  border-style: none;
}
.code-group-item div[class*="language-"]::after {
  display: none;
}
.code-group-item div[class*="language-"] pre[class*="language-"] {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  border-top-width: 0px !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.code-group-item .line-numbers {
  padding-bottom: 1rem !important;
}
.arrow {
  display: inline-block;
  height: 0.375rem;
  width: 0.375rem;
  border-width: 0px;
  border-style: solid;
  border-color: transparent;
  --tw-border-opacity: 1;
  border-color: rgb(44 62 80 / var(--tw-border-opacity));
  vertical-align: middle;
}.dark .arrow {
  --tw-border-opacity: 1;
  border-color: rgb(173 186 199 / var(--tw-border-opacity));
}.arrow {
  border-radius: 1px;
}

  .arrow.up {
  --tw-translate-y: 0.125rem;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-left-width: 1px;
  border-top-width: 1px;
}

  .arrow.down {
  --tw-translate-y: -0.125rem;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-right-width: 1px;
  border-bottom-width: 1px;
}

  .arrow.right {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-right-width: 1px;
  border-top-width: 1px;
}

  .arrow.left {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-left-width: 1px;
  border-bottom-width: 1px;
}
.back-to-top {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity)) !important;
}
.back-to-top:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(97 106 229 / var(--tw-bg-opacity)) !important;
}
.categories-container {
  margin-left: auto;
  margin-right: auto;
  padding-top: 6rem;
  padding-bottom: 6rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 1024px) {.categories-container {
    max-width: 768px;
  }
}
@media (min-width: 1280px) {.categories-container {
    max-width: 1024px;
  }
}
.categories-container .category-list {
  list-style-type: none;
  padding-left: 0px;
}
.categories-container .category-list .category-item {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .categories-container .category-list .category-item {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.categories-container .category-list .category-item {
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .categories-container .category-list .category-item {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.categories-container .category-list .category-item {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark .categories-container .category-list .category-item {
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
.categories-container .category-list .category-item {
  margin-right: 1rem;
  margin-bottom: 1rem;
  display: inline-block;
  cursor: pointer;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
}
.categories-container .category-list .category-item .category-link {
  display: inline-block;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.categories-container .category-list .category-item .category-link .text {
  margin-right: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.categories-container .category-list .category-item .category-link .num {
  display: inline-block;
  height: 1.25rem;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.categories-container .category-list .category-item.active,  .categories-container .category-list .category-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 229 / var(--tw-bg-opacity));
}
.categories-container .category-list .category-item.active .category-link .text,  .categories-container .category-list .category-item:hover .category-link .text {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.categories-container .category-list .category-item.active .category-link .num,  .categories-container .category-list .category-item:hover .category-link .num {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
/* 兼容 */
.dark .categories-container .category-list .category-item .category-link .text {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */
/* Code blocks */
div[class*="language-"] {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark div[class*="language-"] {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
div[class*="language-"] {
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark div[class*="language-"] {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
div[class*="language-"] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark div[class*="language-"] {
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
div[class*="language-"] {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
div[class*="language-"]::before {
  position: absolute;
  top: 0.625rem;
  right: 0.75rem;
  z-index: 10;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}
div[class*="language-"]::after {
  position: absolute;
  top: 0.875rem;
  left: 1rem;
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 9999px;
    content: "";
    /* background: #f95c5b; */
    /* box-shadow: 0 0 0 1px #da3d42, 22px 0 0 0 #fabe3b, 22px 0 0 1px #ecb03e, 44px 0 0 0 #38cd46, 44px 0 0 1px #2eae32; */
    background: #858DE6;
    box-shadow: 22px 0 0 0 #858DE6, 44px 0 0 0 #858DE6;
}
div[class*="language-"] pre[class*="language-"] {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark div[class*="language-"] pre[class*="language-"] {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
div[class*="language-"] pre[class*="language-"] {
  border-width: 0px;
  border-top-width: 1px;
  position: relative;
  margin-top: 2.25rem;
  overflow-x: auto;
  border-style: dashed;
  padding-top: 1rem;
  padding-right: 1.5rem;
  padding-left: 4rem;
  padding-bottom: 1.5rem;
  line-height: 1.75rem;
}
div[class*="language-"] pre[class*="language-"] .code-copy-btn {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark div[class*="language-"] pre[class*="language-"] .code-copy-btn {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
div[class*="language-"] pre[class*="language-"] .code-copy-btn {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark div[class*="language-"] pre[class*="language-"] .code-copy-btn {
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
div[class*="language-"] pre[class*="language-"] .code-copy-btn {
  right: 0.75rem !important;
  top: 0.25rem !important;
  display: none !important;
  border-radius: 0.25rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  --tw-text-opacity: 1 !important;
  color: rgb(156 163 175 / var(--tw-text-opacity)) !important;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
div[class*="language-"]:hover pre[class*="language-"] .code-copy-btn {
  display: block !important;
}
div[class*="language-"]:not(.line-numbers-mode) .line-numbers {
  display: none;
}
div[class*="language-"].line-numbers-mode {
  position: relative;
}
div[class*="language-"].line-numbers-mode .line-numbers {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark div[class*="language-"].line-numbers-mode .line-numbers {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
div[class*="language-"].line-numbers-mode .line-numbers {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark div[class*="language-"].line-numbers-mode .line-numbers {
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
div[class*="language-"].line-numbers-mode .line-numbers {
  position: absolute;
  bottom: 0px;
  width: 4rem;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
  text-align: center;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
      counter-reset: line-number;
}
div[class*="language-"].line-numbers-mode .line-numbers br {
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
      }
div[class*="language-"].line-numbers-mode .line-numbers .line-number {
        position: relative;
        z-index: 3;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
      }
div[class*="language-"].line-numbers-mode .line-numbers .line-number::before {
          counter-increment: line-number;
          content: counter(line-number);
        }
div[class*="language-"] pre code {
  background-color: transparent !important;
  padding: 0px !important;
  line-height: 1.5rem !important;
}
div[class*="language-"] .highlight-lines {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 10;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
  line-height: 1.75rem;
}
div[class*="language-"] .highlight-lines .highlight-line {
  background-color: rgb(107 114 128 / 0.1);
}
.dark div[class*="language-"] .highlight-lines .highlight-line {
  background-color: rgb(249 250 251 / 0.1);
}
code[class*="language-"],
pre[class*="language-"] {
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  -webkit-hyphens: none;
          hyphens: none;
  white-space: pre;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1.5;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity));
}
.dark code[class*="language-"], .dark 
pre[class*="language-"] {
  --tw-text-opacity: 1;
  color: rgb(255 251 235 / var(--tw-text-opacity));
}
.token.comment,
 .token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
   color: #999;
 }
.token.punctuation {
   color: #ccc;
 }
.token.tag,
 .token.namespace,
 .token.deleted {
   color: #e2777a;
 }
.token.attr-name {
  /* color: #e2777a; */
  color: #cc99cd;
}
.token.function-name {
   color: #6196cc;
 }
.token.boolean,
 .token.number,
 .token.function {
   color: #f08d49;
 }
.token.property,
 .token.value,
 .token.class-name,
 .token.constant,
 .token.symbol {
  /* color: #f8c555; */
   color: #8F95DA;
 }
.token.selector,
 .token.important,
 .token.atrule,
 .token.keyword,
 .token.builtin {
   /* color: #cc99cd; */
   color: #e2777a;
 }
.token.string,
 .token.char,
 .token.attr-value,
 .token.regex,
 .token.variable {
   color: #7ec699;
 }
.token.operator,
 .token.entity,
 .token.url {
   color: #67cdcc;
 }
.token.important, 
 .token.bold {
  font-weight: 600;
}
.token.italic {
  font-style: italic;
 }
.token.entity {
   cursor: help;
 }
.token.inserted {
   color: green;
 }
/* code-other */
div.language-javascript::before {
    content: 'javascript';
  }
div.language-yaml::before {
    content: 'yaml';
  }
div.language-bash::before {
    content: 'bash';
  }
div.language-cpp::before {
    content: 'cpp';
  }
div.language-cs::before {
    content: 'cs';
  }
div.language-css::before {
    content: 'css';
  }
div.language-dart::before {
    content: 'dart';
  }
div.language-docker::before {
    content: 'docker';
  }
div.language-fs::before {
    content: 'fs';
  }
div.language-go::before {
    content: 'go';
  }
div.language-html::before {
    content: 'html';
  }
div.language-java::before {
    content: 'java';
  }
div.language-js::before {
    content: 'js';
  }
div.language-json::before {
    content: 'json';
  }
div.language-kt::before {
    content: 'kt';
  }
div.language-less::before {
    content: 'less';
  }
div.language-makefile::before {
    content: 'makefile';
  }
div.language-md::before {
    content: 'md';
  }
div.language-php::before {
    content: 'php';
  }
div.language-py::before {
    content: 'py';
  }
div.language-rb::before {
    content: 'rb';
  }
div.language-rs::before {
    content: 'rs';
  }
div.language-sass::before {
    content: 'sass';
  }
div.language-scss::before {
    content: 'scss';
  }
div.language-sh::before {
    content: 'sh';
  }
div.language-styl::before {
    content: 'styl';
  }
div.language-ts::before {
    content: 'ts';
  }
div.language-toml::before {
    content: 'toml';
  }
div.language-vue::before {
    content: 'vue';
  }
div.language-yml::before {
    content: 'yml';
  }
.common-wrapper .password-wrapper.out {
  position: fixed;
  z-index: 50;
  height: 100vh;
  width: 100vw;
}
.custom-container {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  word-break: break-all;
  padding-left: 3rem;
  padding-right: 1rem;
}
.custom-container > svg {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 1.75rem;
  font-weight: 700;
}
.custom-container .custom-container-title {
  margin-top: 0.875rem;
  margin-bottom: 0px;
  font-weight: 700;
}
.custom-container.tip,  .custom-container.info {
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(97 106 229 / var(--tw-border-opacity));
  background-color: rgba(97, 106, 229, 0.1);
}
.custom-container.tip .custom-container-title,  .custom-container.tip svg,  .custom-container.info .custom-container-title,  .custom-container.info svg {
  --tw-text-opacity: 1;
  color: rgb(97 106 229 / var(--tw-text-opacity));
}
.custom-container.tip code,  .custom-container.info code {
  background-color: rgb(97 106 229 / 0.2) !important;
}
.custom-container.warning {
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(251 155 95 / var(--tw-border-opacity));
  background-color: rgba(251, 155, 95, 0.1);
}
.custom-container.warning .custom-container-title,  .custom-container.warning svg {
  --tw-text-opacity: 1;
  color: rgb(251 155 95 / var(--tw-text-opacity));
}
.custom-container.warning code {
  background-color: rgb(251 155 95 / 0.2) !important;
}
.custom-container.danger {
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(242 109 109 / var(--tw-border-opacity));
  background-color: rgba(242, 109, 109, 0.1);
}
.custom-container.danger .custom-container-title,  .custom-container.danger svg {
  --tw-text-opacity: 1;
  color: rgb(242 109 109 / var(--tw-text-opacity));
}
.custom-container.danger code {
  background-color: rgb(242 109 109 / 0.2) !important;
}
.custom-container.details {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .custom-container.details {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.custom-container.details {
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .custom-container.details {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.custom-container.details {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .custom-container.details {
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.custom-container.details {
  border-radius: 0.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
}
.custom-container.details .custom-container-title {
  margin-top: 0px;
  cursor: pointer;
}
.custom-container.details code {
  background-color: rgb(0 0 0 / 0.05) !important;
}
.dark .custom-container.details code {
  background-color: rgb(0 0 0 / 0.2);
}
.banner-wrapper {
  display: flex;
  height: 60vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {.banner-wrapper {
    height: 100vh;
  }
}
.banner-wrapper .hero-content img {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
  display: block;
  width: 8rem;
}
@media (min-width: 640px) {.banner-wrapper .hero-content img {
    width: 10rem;
  }
}
@media (min-width: 768px) {.banner-wrapper .hero-content img {
    width: 15rem;
  }
}
.banner-wrapper .hero-content h1 {
  margin-bottom: 1.5rem !important;
  text-align: center !important;
}
.banner-wrapper .hero-content p {
  text-align: center;
}
.banner-brand-wrapper {
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {.banner-brand-wrapper {
    height: 100vh;
  }
}
.banner-brand-wrapper .hero-content {
  display: block;
}
@media (min-width: 768px) {.banner-brand-wrapper .hero-content {
    display: flex;
    max-width: 56rem;
    flex-direction: row-reverse;
    align-items: flex-start;
  }
}
.banner-brand-wrapper .hero-content .hero-text {
  margin-bottom: 4rem;
  box-sizing: border-box;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.banner-brand-wrapper .hero-content .hero-text h1 {
  margin-bottom: 1.5rem !important;
  text-align: center !important;
  font-size: 2.25rem !important;
  line-height: 2.5rem !important;
}
@media (min-width: 768px) {.banner-brand-wrapper .hero-content .hero-text h1 {
    text-align: left !important;
    font-size: 3.75rem !important;
    line-height: 1 !important;
  }
}
.banner-brand-wrapper .hero-content .hero-text .btn-group {
  margin-top: 2rem;
  list-style-type: none;
  padding-left: 0px;
  text-align: center;
}
@media (min-width: 768px) {.banner-brand-wrapper .hero-content .hero-text .btn-group {
    text-align: left;
  }
}
.banner-brand-wrapper .hero-content .hero-text .btn-group li {
  display: inline-block;
  vertical-align: middle;
}
.banner-brand-wrapper .hero-content .hero-text .btn-group li:hover {
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
}
.banner-brand-wrapper .hero-content .hero-text .btn-group li .icon-container {
  cursor: pointer;
  border-radius: 0.375rem;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 229 / var(--tw-bg-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .banner-brand-wrapper .hero-content .hero-text .btn-group li .icon-container {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.banner-brand-wrapper .hero-content .hero-text .btn-group li.plain .icon-container {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .banner-brand-wrapper .hero-content .hero-text .btn-group li.plain .icon-container {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.banner-brand-wrapper .hero-content .hero-text .btn-group li.plain .icon-container {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark .banner-brand-wrapper .hero-content .hero-text .btn-group li.plain .icon-container {
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
.banner-brand-wrapper .hero-content .hero-text .btn-group li:not(:first-child) {
  margin-left: 1rem;
}
.banner-brand-wrapper .hero-content .hero-text .social-links {
  margin-top: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem;
  padding-left: 0px;
  text-align: center;
}
@media (min-width: 768px) {.banner-brand-wrapper .hero-content .hero-text .social-links {
    text-align: left;
  }
}
.banner-brand-wrapper .hero-content .hero-text .social-links .social-item {
  list-style-type: none;
  text-align: center;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.banner-brand-wrapper .hero-content .hero-text .social-links .social-item:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.banner-brand-wrapper .hero-content .hero-text .social-links .social-item {
          width: 39px;
          height: 36px;
          line-height: 36px;
        }
.banner-brand-wrapper .hero-content img {
  margin-left: auto;
  margin-right: auto;
  margin-top: 8rem;
  margin-bottom: 4rem;
  display: block;
  width: 10rem;
}
@media (min-width: 640px) {.banner-brand-wrapper .hero-content img {
    width: 10rem;
  }
}
@media (min-width: 768px) {.banner-brand-wrapper .hero-content img {
    margin-top: 0px;
    margin-left: 4rem;
    width: 15rem;
  }
}
.home-blog-content {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: 4rem;
  display: block;
  max-width: 1024px;
  align-items: flex-start;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {.home-blog-content {
    display: flex;
  }
}
.home-blog-content .blog-list {
  flex: 1 1 auto;
}
.home-blog-content .info-wrapper {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .home-blog-content .info-wrapper {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.home-blog-content .info-wrapper {
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .home-blog-content .info-wrapper {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.home-blog-content .info-wrapper {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .home-blog-content .info-wrapper {
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.home-blog-content .info-wrapper {
  position: sticky;
  top: 5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
}
@media (min-width: 768px) {.home-blog-content .info-wrapper {
    margin-left: 1rem;
  }
}
.home-blog-content .info-wrapper {
    flex: 0 0 300px;
  }
.home-blog-content .info-wrapper .module-title {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding-top: 0px;
}
.home-blog-content .info-wrapper .category-wrapper {
  list-style-type: none;
  padding-left: 0px;
}
.home-blog-content .info-wrapper .category-wrapper .category-item {
  margin-bottom: 1rem;
  cursor: pointer;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
}
.home-blog-content .info-wrapper .category-wrapper .category-item .category-link {
  display: flex;
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.home-blog-content .info-wrapper .category-wrapper .category-item .category-link .text {
  margin-right: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.home-blog-content .info-wrapper .category-wrapper .category-item .category-link .num {
  display: inline-block;
  height: 1.25rem;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.home-blog-content .info-wrapper .category-wrapper .category-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 229 / var(--tw-bg-opacity));
}
.home-blog-content .info-wrapper .category-wrapper .category-item:hover .category-link .text {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.home-blog-content .info-wrapper .category-wrapper .category-item:hover .category-link .num {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.home-blog-content .info-wrapper .tag-wrapper {
  list-style-type: none;
  padding-left: 0px;
}
.home-blog-content .info-wrapper .tag-wrapper .tag-item {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  cursor: pointer;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
}
.home-blog-content .info-wrapper .tag-wrapper .tag-item .tag-link {
  display: flex;
  justify-content: space-between;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1;
}
.home-blog-content .info-wrapper .tag-wrapper .tag-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 229 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.home-blog-content .info-wrapper .tag-wrapper .tag-item:hover .tag-link {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.home-blog-content .pagation-container {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.dark .home-blog-content .info-wrapper .category-wrapper .category-item .category-link .text {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.footer-wrapper {
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
  padding: 1.5rem;
  text-align: center;
  font-weight: 500;
}
.dark .footer-wrapper {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.footer-wrapper > span {
  margin-left: 1rem;
  display: block;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: left;
}
@media (min-width: 768px) {.footer-wrapper > span {
    display: inline-block;
  }.footer-wrapper > span:first-of-type {
    margin-left: 0px;
  }
}
.footer-wrapper .cyber-security {
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: left;
}
@media (min-width: 768px) {.footer-wrapper .cyber-security {
    justify-content: center;
    text-align: center;
  }
}
.footer-wrapper .cyber-security img {
  margin-right: 0.5rem;
  height: 1rem;
  width: 1rem;
  vertical-align: middle;
}
.footer-wrapper .cyber-security a {
  vertical-align: middle;
      font-size: 14px;
}
.navbar-container {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 30;
  height: 3.5rem;
  width: 100vw;
  background-color: rgb(255 255 255 / 0.6);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  line-height: 1.5rem;
  --tw-backdrop-blur: blur(24px);
  --tw-backdrop-saturate: saturate(1.5);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.dark .navbar-container {
  background-color: rgb(34 39 46 / 0.6);
}
@media (min-width: 768px) {.navbar-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.navbar-container .nav-item {
  display: inline-block;
  vertical-align: middle;
}
.navbar-container .site-brand {
  vertical-align: middle;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}
.navbar-container .site-brand .logo {
  margin-right: 1rem;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  border-radius: 0.375rem;
  vertical-align: middle;
}
.navbar-container .site-brand .site-name {
  vertical-align: middle;
}
.navbar-container .navbar-links-wrapper {
  position: absolute;
  right: 1rem;
  top: 0.75rem;
    white-space: nowrap;
}
.navbar-container .navbar-links-wrapper .navbar-links {
  display: none;
  vertical-align: middle;
}
@media (min-width: 768px) {.navbar-container .navbar-links-wrapper .navbar-links {
    display: inline-block;
  }
}
.navbar-container .navbar-links-wrapper .btn-toggle-menus {
  vertical-align: middle;
}
.navbar-container .toggle-sidebar-button {
  display: inline-block;
  vertical-align: middle;
}
@media (min-width: 768px) {.navbar-container .toggle-sidebar-button {
    display: none;
  }
}
.navbar-container .search-box,  .navbar-container .docsearch-container {
  vertical-align: middle;
}
.navbar-container .btn-toggle-dark-mode {
  margin-left: 1rem;
  display: none;
  vertical-align: middle;
}
@media (min-width: 768px) {.navbar-container .btn-toggle-dark-mode {
    display: inline-block;
  }
}
.navbar-container .btn-toggle-dark-mode {
    height: 20px;
  }
.navbar-container .btn-toggle-menus {
  margin-left: 0.75rem;
  display: inline-block;
  vertical-align: middle;
}
@media (min-width: 768px) {.navbar-container .btn-toggle-menus {
    display: none;
  }
}
.navbar-container .btn-toggle-menus {
    height: 20px;
  }
.navbar-container .btn-toggle-menus svg {
  display: block;
}
@media (min-width: 768px) {.navbar-links {
    margin-left: 1.5rem;
  }
}
.navbar-links .icon-container {
  vertical-align: middle;
}
.navbar-links .navbar-links-item {
  display: block;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
@media (min-width: 768px) {.navbar-links .navbar-links-item {
    display: inline-block;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}
.navbar-links .navbar-links-item:not(:first-child) {
  margin-left: 0px;
}
@media (min-width: 768px) {.navbar-links .navbar-links-item:not(:first-child) {
    margin-left: 1.5rem;
  }
}
.navbar-links .navbar-links-item > a.nav-link {
  display: inline-block;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.navbar-links .navbar-links-item .arrow {
  margin-left: 0.25rem;
}
.navbar-links .navbar-links-item .dropdown-wrapper {
  position: relative;
      height: 24px;
}
.navbar-links .navbar-links-item .dropdown-wrapper button {
        height: 24px;
      }
.navbar-links .navbar-links-item .dropdown-wrapper .dropdown-title {
  display: none;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
@media (min-width: 768px) {.navbar-links .navbar-links-item .dropdown-wrapper .dropdown-title {
    display: flex;
  }
}
.navbar-links .navbar-links-item .dropdown-wrapper .mobile-dropdown-title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
@media (min-width: 768px) {.navbar-links .navbar-links-item .dropdown-wrapper .mobile-dropdown-title {
    display: none;
    width: auto;
    justify-content: flex-start;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown {
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark .navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown {
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown {
  margin-top: 0px;
  margin-bottom: 0px;
  list-style-type: none;
  border-radius: 0.375rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  border-width: 0px;
}
@media (min-width: 768px) {.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown {
    position: absolute;
    top: 0.75rem;
    right: -1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    display: none;
    border-width: 1px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item {
  position: relative;
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item:not(:first-of-type)::before {
  position: absolute;
  left: -0.75rem;
  right: -0.75rem;
  top: 0px;
  display: block;
  border-top-width: 0px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
            /* 待确定 */
            /* @apply md:border-t; */
}
.dark .navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item:not(:first-of-type)::before {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item:not(:first-of-type)::before {
            content: '';
          }
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item:not(:first-of-type) .dropdown-subtitle {
  position: relative;
  z-index: 40;
  margin-top: 2rem;
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item:not(:first-of-type) .dropdown-subtitle::before {
  position: absolute;
  left: 0px;
  top: -1rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item:not(:first-of-type) .dropdown-subtitle::before {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item:not(:first-of-type) .dropdown-subtitle::before {
                content: '';
              }
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subtitle {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 0.75rem;
  line-height: 1rem;
}
@media (min-width: 768px) {.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subtitle {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper {
  list-style-type: none;
  padding-left: 0.75rem;
}
@media (min-width: 768px) {.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper {
    padding-left: 0px;
  }
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem .nav-link {
  position: relative;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem .nav-link::before {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  display: block;
  height: 0px;
  width: 0px;
  border-radius: 50%;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  --tw-bg-opacity: 1;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity));
                content: '';
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem .nav-link:hover {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem .nav-link.active {
  padding-left: 0.5rem;
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem .nav-link.active a {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem .nav-link.active::before {
  height: 0.25rem;
  width: 0.25rem;
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem .nav-link.router-link-active {
  padding-left: 0.5rem;
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem .nav-link.router-link-active::before {
  height: 0.25rem;
  width: 0.25rem;
}
.navbar-links .navbar-links-item .dropdown-wrapper .nav-dropdown .dropdown-item a.nav-link {
  display: inline-block;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.navbar-links .navbar-links-item .dropdown-wrapper.open {
        height: auto;
      }
.navbar-links .navbar-links-item .dropdown-wrapper.open .nav-dropdown {
  display: block !important;
}
@media (min-width: 768px) {.navbar-links .navbar-links-item .dropdown-wrapper:hover .nav-dropdown {
    display: block !important;
  }
}
/* 选中高亮，不可以移动 */
.navbar-links .navbar-links-item .router-link-active span {
  --tw-text-opacity: 1 !important;
  color: rgb(73 84 230 / var(--tw-text-opacity)) !important;
}
/* 兼容 */
.dark .navbar-links .navbar-links-item .dropdown-wrapper .dropdown-title {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.dark .navbar-links .navbar-links-item .dropdown-wrapper .mobile-dropdown-title {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
#nprogress .bar {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity)) !important;
}
.pagation-container {
  text-align: center;
}
.pagation-container .jump,  .pagation-container .jumpinput {
  margin-right: 0.5rem;
  display: inline-block;
  max-width: 20rem;
  cursor: pointer;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.pagation-container .jump:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 229 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.pagation-container .jump.active {
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 229 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.pagation-container .jump .icon-container {
  vertical-align: middle;
}
.pagation-container .jumpinput {
  width: 4rem;
}
.pagation-container .jumpinput input {
  width: 100%;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
/* 兼容 */
.dark .pagation-container .jump, .dark  .pagation-container .jumpinput {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.dark .pagation-container .jumpinput input {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.page-container {
  margin-top: 6rem;
  margin-bottom: 6rem;
}
.page-container .page-info {
  margin-bottom: 1rem;
}
.page-container.show-series {
  padding-left: 0px;
}
@media (min-width: 768px) {.page-container.show-series {
    padding-left: 18rem;
  }
}
.page-container.show-catalog {
  padding-right: 0px;
}
@media (min-width: 1024px) {.page-container.show-catalog {
    padding-right: 14rem;
  }
}
.page-catalog-container {
  position: fixed;
  top: 4rem;
  bottom: 4rem;
  right: 0px;
  z-index: 10;
  margin-left: 2.5rem;
  display: none;
  width: 14rem;
  overflow-y: auto;
  padding-left: 1.5rem;
  padding-right: 2.5rem;
  padding-top: 1rem;
}
@media (min-width: 1024px) {.page-catalog-container {
    display: block;
  }
}
.page-catalog-container .tip {
  font-weight: 800;
}
.page-catalog-container ul {
  list-style-type: none;
  padding-left: 0px;
}
.page-catalog-container ul .page-catalog-menu-depth_2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  border-top-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.page-catalog-container ul .page-catalog-menu-depth_2.active a {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.page-catalog-container ul .page-catalog-menu-depth_3 {
  position: relative;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.page-catalog-container ul .page-catalog-menu-depth_3::before {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  display: block;
  height: 0px;
  width: 0px;
  border-radius: 50%;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  --tw-bg-opacity: 1;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity));
        content: '';
}
.page-catalog-container ul .page-catalog-menu-depth_3:hover {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.page-catalog-container ul .page-catalog-menu-depth_3.active {
  padding-left: 0.75rem;
}
.page-catalog-container ul .page-catalog-menu-depth_3.active a {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.page-catalog-container ul .page-catalog-menu-depth_3.active::before {
  height: 0.25rem;
  width: 0.25rem;
}
/* 兼容 */
.dark .page-catalog-container ul .page-catalog-menu-depth_2 {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.page-info {
  display: flex;
  flex-wrap: wrap;
}
.page-info .icon-container a {
      color: inherit;
    }
.page-info .icon-container a:hover {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.page-info .icon-container a:not(:last-child) {
  margin-right: 0.5rem;
}
.page-info .icon-container:not(:last-child) {
  margin-right: 1.25rem;
}
.page-meta {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media (min-width: 768px) {.page-meta {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}
.page-meta .meta-item {
  margin-top: 0.875rem;
  cursor: pointer;
}
.page-meta .meta-item .meta-item-label {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.page-meta .edit-link {
  margin-right: 1rem;
}
/* 兼容 */
.dark .page-meta .meta-item .meta-item-label {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.page-nav {
  padding-top: 1rem;
  padding-bottom: 0px;
}
.page-nav .inner {
  margin-top: 0px;
  overflow: hidden;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
  padding-top: 1rem;
}
@media (min-width: 768px) {.page-nav .inner {
    display: flex;
    justify-content: space-between;
  }.page-nav .inner.hasPrev {
    justify-content: flex-start;
  }.page-nav .inner.hasNext {
    justify-content: flex-end;
  }.page-nav .inner.hasPrev.hasNext {
    justify-content: space-between;
  }.page-nav .inner.hasPrev.hasNext .next {
    margin-left: 1rem;
  }
}
.page-nav a {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.page-nav .next {
  text-align: right;
}
.page-nav .page-nav-item {
  margin-top: 1rem;
  display: block;
  cursor: pointer;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
  padding: 1rem;
}
@media (min-width: 768px) {.page-nav .page-nav-item {
    width: 50%;
  }
}
.page-nav .page-nav-item:hover {
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
}
/* 兼容 */
.dark .page-nav .inner {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.dark .page-nav .page-nav-item {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.password-wrapper {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .password-wrapper {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.password-wrapper {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .password-wrapper {
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.password-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.password-wrapper input {
  position: absolute;
  z-index: 0;
  display: block;
  height: 5rem;
  width: 100%;
  opacity: 0;
}
.password-wrapper .site-info .logo {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 15rem;
}
.password-wrapper .site-info .site-name {
  margin-bottom: 4rem;
  padding-top: 3rem;
}
.password-wrapper .password-show {
  margin-top: 1rem;
  display: flex;
  padding-left: 0px;
}
.password-wrapper .password-show li {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .password-wrapper .password-show li {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.password-wrapper .password-show li {
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
}
.dark .password-wrapper .password-show li {
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
}
.password-wrapper .password-show li {
  margin-left: 1rem;
  margin-right: 1rem;
  height: 4rem;
  width: 4rem;
  list-style-type: none;
  border-radius: 0.5rem;
  border-width: 2px;
  text-align: center;
      line-height: 4rem;
}
.password-wrapper .password-show li i {
  --tw-bg-opacity: 1;
  background-color: rgb(44 62 80 / var(--tw-bg-opacity));
        height: 10px;
        width: 10px;
        border-radius:50% ;
        display: inline-block;
}
.personal-info-wrapper .personal-img {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 1rem;
  display: block;
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
}
.personal-info-wrapper .name {
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}
.personal-info-wrapper .social-links {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem;
}
.personal-info-wrapper .social-links .social-item {
  list-style-type: none;
  text-align: center;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.personal-info-wrapper .social-links .social-item:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.personal-info-wrapper .social-links .social-item {
      width: 39px;
      height: 36px;
      line-height: 36px;
    }
.post-item-container {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .post-item-container {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.post-item-container {
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .post-item-container {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.post-item-container {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .post-item-container {
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.post-item-container {
  margin-bottom: 2rem;
  padding: 1.5rem;
}
.post-item-container .title {
  position: relative;
  margin-bottom: 0.5rem;
  display: inline-block;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}
.post-item-container .title:after {
  position: absolute;
  left: 0px;
  bottom: -0.5rem;
  width: 100%;

      content: "";
      height: 2px;
      visibility: hidden;
      transform: scaleX(0);
      transition: 0.3s ease-in-out;
      --tw-bg-opacity: 1;
      background-color: rgb(73 84 230 / var(--tw-bg-opacity));
}
.post-item-container .title:hover a {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.post-item-container .title:hover:after {
      visibility: visible;
      transform: scaleX(1);
    }
.post-item-container .page-info {
  margin-top: 0.5rem;
}
.search-box input {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .search-box input {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.search-box input {
  border-radius: 1rem !important;
  background-color: rgb(249 250 251 / 0) !important;
  padding-right: 0px !important;
  --tw-backdrop-blur: blur(24px) !important;
  --tw-backdrop-saturate: saturate(1.5) !important;
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
}
.dark .search-box input {
  background-color: rgb(54 59 70 / 0) !important;
}
.search-box input:focus {
  --tw-border-opacity: 1 !important;
  border-color: rgb(73 84 230 / var(--tw-border-opacity)) !important;
}
.search-box input {
    background: url('/blog/assets/search.27cc0fb7.svg') 0.4rem 0.4rem no-repeat;
    background-size: 1.2rem 1.2rem;
  }
.search-box .suggestions {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .search-box .suggestions {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.search-box .suggestions {
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .search-box .suggestions {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.search-box .suggestions {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark .search-box .suggestions {
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
.search-box .suggestions .suggestion a {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .search-box .suggestions .suggestion a {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.search-box .suggestions .suggestion.focus {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 245 / var(--tw-bg-opacity));
}
.dark .search-box .suggestions .suggestion.focus {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(43 49 58 / var(--tw-bg-opacity)) !important;
}
.search-box .suggestions .suggestion.focus a {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
#docsearch-container {
  display: inline-block;
  vertical-align: middle;
}
#docsearch-container button {
  height: 2rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.series-container {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .series-container {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.series-container {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark .series-container {
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
.series-container {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  z-index: 50;
  width: 16rem;
  overflow-y: auto;
  padding-right: 1.5rem;
  padding-left: 2.5rem;
  padding-top: 1.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (min-width: 768px) {.series-container {
    z-index: 20 !important;
    --tw-translate-x: 0px !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
    padding-top: 5rem !important;
  }
}
.series-container {
  border-right-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .series-container {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.series-container .series-group:not(:first-of-type) h5.series-heading {
  position: relative;
  margin-top: 0.75rem;
}
.series-container .series-group:not(:first-of-type) h5.series-heading::before {
  position: absolute;
  left: 0px;
  bottom: 3.5rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .series-container .series-group:not(:first-of-type) h5.series-heading::before {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.series-container .series-group:not(:first-of-type) h5.series-heading::before {
        content: '';
      }
.series-container .series-group .series-heading {
  margin-bottom: 1rem;
  font-weight: 800;
}
.series-container .series-group .series-heading + ul {
  margin: 0px;
  list-style-type: none;
  padding-left: 0px;
}
.series-container .series-group .series-heading.active {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.series-container .series-group ul {
  list-style-type: none;
  padding-left: 1rem;
}
.series-container a.series-item {
  position: relative;
  display: block;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.75rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.series-container a.series-item::before {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  display: block;
  height: 0px;
  width: 0px;
  border-radius: 50%;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  --tw-bg-opacity: 1;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity));
      content: '';
}
.series-container a.series-item:hover {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.series-container a.series-item.router-link-active {
  padding-left: 1rem;
}
.series-container a.series-item.router-link-active::before {
  height: 0.375rem;
  width: 0.375rem;
}
.series-container a.series-item.router-link-active a {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.sidebar-mask {
  position: fixed;
  z-index: 40;
  display: none;
  height: 100vh;
  width: 100vw;
  background-color: rgb(75 85 99 / 0.4);
}
.sidebar-open .series-container {
  --tw-translate-x: 0px !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.sidebar-open .sidebar-mask {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: block;
}
.sidebar-open .toggle-sidebar-button .icon span:nth-of-type(1) {
  width: 1.5rem;
  --tw-translate-x: -0.125rem;
  --tw-translate-y: 0.5rem;
  --tw-rotate: 225deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.sidebar-open .toggle-sidebar-button .icon span:nth-of-type(2) {
  width: 0px;
}
.sidebar-open .toggle-sidebar-button .icon span:nth-of-type(3) {
  width: 1.5rem;
  --tw-translate-x: -0.125rem;
  --tw-translate-y: -0.5rem;
  --tw-rotate: -225deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (min-width: 768px) {.no-sidebar .series-container {
    display: none;
  }
}
.mobile-menus-container {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .mobile-menus-container {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.mobile-menus-container {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark .mobile-menus-container {
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
.mobile-menus-container {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 20;
  overflow-y: auto;
  padding-left: 3.5rem;
  padding-right: 3.5rem;
  padding-top: 5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.mobile-menus-container .navbar-links {
  position: relative;
  margin-bottom: 2rem;
  display: block;
}
@media (min-width: 768px) {.mobile-menus-container .navbar-links {
    display: none;
  }
}
.mobile-menus-container .navbar-links .navbar-links-item {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .mobile-menus-container .navbar-links .navbar-links-item {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.mobile-menus-container .navbar-links .navbar-links-item {
  border-width: 0px;
  border-bottom-width: 1px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.mobile-menus-container .appearance {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark .mobile-menus-container .appearance {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
.mobile-menus-container .appearance {
  border-radius: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark .mobile-menus-container .appearance {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.mobile-menus-container .appearance {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark .mobile-menus-container .appearance {
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
.mobile-menus-container .appearance {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
}
.mobile-menus-container .appearance svg {
  margin-left: 1.5rem;
}
.mobile-menus-open .mobile-menus-container {
  --tw-translate-y: 0px !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.sidebar-container {
  position: fixed;
  top: 3.5rem;
  bottom: 0px;
  z-index: 10;
  width: 16rem;
  padding-top: 1rem;
}
.sidebar-container .sidebar-item a {
  display: block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
}
.sidebar-container .sidebar-item a + ul {
  list-style-type: none;
  padding-left: 1rem;
}
.sidebar-container .sidebar-item a.router-link-active {
  position: relative;
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.sidebar-container .sidebar-item a.router-link-active::before {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0.375rem;
  margin: auto;
  display: block;
  height: 0.25rem;
  width: 0.25rem;
  border-radius: 50%;
          content: '';
          --tw-bg-opacity: 1;
          background-color: rgb(73 84 230 / var(--tw-bg-opacity));
}
.sidebar-container .sidebar-item p.sidebar-heading {
  margin: 0px;
  display: block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.sidebar-container .sidebar-item p.sidebar-heading + ul {
  margin: 0px;
  list-style-type: none;
  padding-left: 1rem;
}
.sidebar-container .sidebar-item p.sidebar-heading.active {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.sidebar-container .sidebar-item > a.router-link-active::before {
  left: 0.25rem;
  height: 0.375rem;
  width: 0.375rem;
}
.sidebar-container > a.sidebar-item {
  display: block;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2.25rem;
}
.sidebar-container > a.sidebar-item.router-link-active {
  position: relative;
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.sidebar-container > a.sidebar-item.router-link-active::before {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 1.5rem;
  margin: auto;
  display: block;
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 50%;
  --tw-bg-opacity: 1;
  background-color: rgb(73 84 230 / var(--tw-bg-opacity));
        content: '';
}
.sidebar-container > .sidebar-item {
  padding-left: 1.25rem;
}
.sidebar-container > .sidebar-item > p.sidebar-heading {
  font-weight: 600;
}
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 仅在需要在 class 属性中使用 tailwind 时才需要下面的引用 */
/* ! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
* {
  margin: 0px;
  padding: 0px;
}
*, 
  ::before, 
  ::after {
  box-sizing: border-box;
  border-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
body {
    /* antialiased 字体平滑 */
    --tw-text-opacity: 1;
    color: rgb(44 62 80 / var(--tw-text-opacity));
  }
.dark body {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
body {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark body {
  --tw-bg-opacity: 1;
  background-color: rgb(34 39 46 / var(--tw-bg-opacity));
}
body {
  margin: 0px;
  width: 100%;
  overflow-x: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
    direction: ltr;
    /* 像素较小时字体会拼接在一起 */
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease;
}
main {
  display: block;
}
svg {
  display: inline-block;
}
hr {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark hr {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
hr {
  border-width: 0px;
  border-top-width: 1px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6 {
  z-index: -10;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -2rem;
  margin-bottom: 2rem;
  padding-top: 3rem;
  line-height: 1.25rem;
}
h1 {
  margin-top: -3rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  line-height: 1.25;
}
/* @apply -mt-4 relative; */
h2::before {
  margin-bottom: 1.5rem;
  display: block;
  width: 100%;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark h2::before {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
h2::before {
      content: ' ';
    }
h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
h4 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
h5 {
  font-size: 1rem;
  line-height: 1.5rem;
}
h6 {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6, 
  strong, 
  b {
  font-weight: 600;
}
a:active, 
  a:link, 
  a:focus, 
  a:visited {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark a:active, .dark 
  a:link, .dark 
  a:focus, .dark 
  a:visited {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
p, 
  ol, 
  ul, 
  table {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 2rem;
}
a,
  area,
  button,
  [role="button"],
  input,
  label,
  select,
  summary,
  textarea {
    touch-action: manipulation;
    background-color: transparent;
    text-decoration-line: none;
  }
button {
  font-size: 1rem;
  line-height: 1.5rem;
}
figure {
  margin: 0px;
}
img {
  max-width: 100%;
}
ul, 
  ol {
  padding-left: 1.25rem;
}
ul {
  list-style-type: disc;
}
ol {
  list-style-type: decimal;
}
li > ul, 
  li > ol {
  margin: 0px;
}
table {
  width: 100%;
  overflow-x: auto;
  border-radius: 0.375rem;
    border-collapse: collapse;
}
table tr {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark table tr {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
table tr {
  border-radius: 0.25rem;
}
table th {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 245 / var(--tw-bg-opacity));
  text-align: left;
  font-weight: 600;
}
.dark table th {
  --tw-bg-opacity: 1;
  background-color: rgb(43 49 58 / var(--tw-bg-opacity));
}
table td,  table th {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
table td:not(:last-child),  table th:not(:last-child) {
  border-right-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(234 236 239 / var(--tw-border-opacity));
}
.dark table td:not(:last-child), .dark  table th:not(:last-child) {
  --tw-border-opacity: 1;
  border-color: rgb(62 76 90 / var(--tw-border-opacity));
}
blockquote {
  --tw-text-opacity: 1;
  color: rgb(44 62 80 / var(--tw-text-opacity));
}
.dark blockquote {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
blockquote {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.dark blockquote {
  --tw-bg-opacity: 1;
  background-color: rgb(54 59 70 / var(--tw-bg-opacity));
}
blockquote {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 0px;
  margin-right: 0px;
  border-left-width: 4px;
  border-style: solid;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
blockquote > p {
  margin: 0px;
}
pre, code, kbd {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  }
kbd {
  border-radius: 0.25rem;
  border-width: 1px;
  border-bottom-width: 2px;
  border-color: rgb(156 163 175 / 0.2);
  background-color: rgb(156 163 175 / 0.05);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
form {
  margin: 0px;
}
p > img {
  border-radius: 1rem;
}
li svg {
  vertical-align: middle;
    transform: translateY(-10%);
}
/************** 滚动条 **************/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0);
  }
::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    --tw-bg-opacity: 1;
    background-color: rgb(73 84 230 / var(--tw-bg-opacity));
  }
::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    --tw-bg-opacity: 1;
    background-color: rgb(73 84 230 / var(--tw-bg-opacity));
  }
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
.theme-container .theme-reco-default-content,  .theme-container .page-container .page-title,  .theme-container .page-container .page-info,  .theme-container .page-meta,  .theme-container .page-nav,  .theme-container .reco-valine-wrapper,  .theme-container reco-vssue-wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 1024px) {.theme-container .theme-reco-default-content,  .theme-container .page-container .page-title,  .theme-container .page-container .page-info,  .theme-container .page-meta,  .theme-container .page-nav,  .theme-container .reco-valine-wrapper,  .theme-container reco-vssue-wrapper {
    max-width: 768px;
  }
}
@media (min-width: 1280px) {.theme-container .theme-reco-default-content,  .theme-container .page-container .page-title,  .theme-container .page-container .page-info,  .theme-container .page-meta,  .theme-container .page-nav,  .theme-container .reco-valine-wrapper,  .theme-container reco-vssue-wrapper {
    max-width: 1024px;
  }
}
@media (min-width: 768px) {.theme-container .theme-reco-default-content,  .theme-container .page-container .page-title,  .theme-container .page-container .page-info,  .theme-container .page-meta,  .theme-container .page-nav,  .theme-container .reco-valine-wrapper,  .theme-container reco-vssue-wrapper {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
.theme-container .theme-reco-default-content, .theme-container .page-container .page-title, .theme-container .page-container .page-info, .theme-container .page-meta, .theme-container .page-nav, .theme-container .reco-valine-wrapper, .theme-container reco-vssue-wrapper {
    border-top: 1px solid transparent;
  }
.theme-container .theme-reco-default-content.theme-reco-default-content code,  .theme-container .page-container .page-title.theme-reco-default-content code,  .theme-container .page-container .page-info.theme-reco-default-content code,  .theme-container .page-meta.theme-reco-default-content code,  .theme-container .page-nav.theme-reco-default-content code,  .theme-container .reco-valine-wrapper.theme-reco-default-content code,  .theme-container reco-vssue-wrapper.theme-reco-default-content code {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  border-radius: 0.25rem;
  background-color: rgb(229 231 235 / 0.6);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.dark .theme-container .theme-reco-default-content.theme-reco-default-content code, .dark  .theme-container .page-container .page-title.theme-reco-default-content code, .dark  .theme-container .page-container .page-info.theme-reco-default-content code, .dark  .theme-container .page-meta.theme-reco-default-content code, .dark  .theme-container .page-nav.theme-reco-default-content code, .dark  .theme-container .reco-valine-wrapper.theme-reco-default-content code, .dark  .theme-container reco-vssue-wrapper.theme-reco-default-content code {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.theme-container .theme-reco-default-content.theme-reco-default-content code, .theme-container .page-container .page-title.theme-reco-default-content code, .theme-container .page-container .page-info.theme-reco-default-content code, .theme-container .page-meta.theme-reco-default-content code, .theme-container .page-nav.theme-reco-default-content code, .theme-container .reco-valine-wrapper.theme-reco-default-content code, .theme-container reco-vssue-wrapper.theme-reco-default-content code {
      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    }
.theme-container .theme-reco-default-content {
  margin-bottom: 4rem;
}
.theme-container .theme-reco-default-content h1 {
      /* @apply -mt-8; */
      display: none;
    }
.theme-container .theme-reco-default-content a {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
}
.theme-container .fade-slide-y-enter-active {
    transition: all 0.3s ease;
  }
.theme-container .fade-slide-y-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
  }
.theme-container .fade-slide-y-enter-from,
  .theme-container .fade-slide-y-leave-to {
    transform: translateY(10px);
    opacity: 0;
  }
h1:hover .header-anchor, 
h1:focus .header-anchor, 
h2:hover .header-anchor, 
h2:focus .header-anchor, 
h3:hover .header-anchor, 
h3:focus .header-anchor, 
h4:hover .header-anchor, 
h4:focus .header-anchor, 
h5:hover .header-anchor, 
h5:focus .header-anchor, 
h6:hover .header-anchor, 
h6:focus .header-anchor {
  --tw-text-opacity: 1;
  color: rgb(73 84 230 / var(--tw-text-opacity));
  opacity: 1;
}
a.header-anchor {
  float: left;
  margin-top: 0.125rem;
  margin-right: 0.25rem;
  margin-left: -0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  opacity: 0;
}
a.header-anchor:hover,  a.header-anchor:focus {
  text-decoration-line: none;
}
.theme.no-navbar > h1, 
.theme.no-navbar > h2, 
.theme.no-navbar > h3, 
.theme.no-navbar > h4, 
.theme.no-navbar > h5, 
.theme.no-navbar > h6 {
  margin-top: 1.5rem;
  padding-top: 0px;
}
.theme.no-navbar aside {
  top: 0px;
}
@media screen and (min-width: 720px) {
  .theme.no-sidebar aside {
    display: none;
  }

  .theme.no-sidebar main {
    margin-left: 0px;
  }
}
/* .icon-btn {
  @apply inline-block cursor-pointer select-none;
  @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-2;
  @apply hover:(opacity-100 bg-gray-400/10);
} */
.icon-btn.disabled {
  pointer-events: none;
  opacity: 0.25;
}
/* .inline-icon-btn {
  @apply text-primary-deep;
  @apply inline-block rounded p-0.5 text-2xl align-middle;
  @apply border border-primary/20;
} */
.btn-toggle-dark-mode svg {
  display: block;
}
.toggle-sidebar-button {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: inline-block;
  width: 1.5rem;
  cursor: pointer;
}
.toggle-sidebar-button .icon {
  width: 100%;
}
.toggle-sidebar-button .icon span {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
  display: block;
  transform-origin: center;
  --tw-bg-opacity: 1;
  background-color: rgb(44 62 80 / var(--tw-bg-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.dark .toggle-sidebar-button .icon span {
  --tw-bg-opacity: 1;
  background-color: rgb(173 186 199 / var(--tw-bg-opacity));
}
.toggle-sidebar-button .icon span {
      height: 2px;
      border-radius: 2px;
    }
.toggle-sidebar-button .icon span:nth-of-type(1) {
  width: 0.75rem;
}
.toggle-sidebar-button .icon span:nth-of-type(2) {
  margin-left: auto;
  margin-right: auto;
  width: 1.5rem;
}
.toggle-sidebar-button .icon span:nth-of-type(3) {
  width: 1.25rem;
}
.page-404-wrapper {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {.page-404-wrapper {
    flex-direction: row;
  }
}
.page-404-wrapper .content {
  margin-right: 0px;
  margin-bottom: 5rem;
  text-align: center;
}
@media (min-width: 768px) {.page-404-wrapper .content {
    margin-right: 10rem;
    margin-bottom: 0px;
  }
}
.page-404-wrapper .content h1 {
  font-size: 8rem !important;
  line-height: 1 !important;
}
.page-404-wrapper .content .icon-container {
  display: inline-block;
  cursor: pointer;
  border-radius: 0.375rem;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(73 84 230 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 229 / var(--tw-bg-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark .page-404-wrapper .content .icon-container {
  --tw-text-opacity: 1;
  color: rgb(173 186 199 / var(--tw-text-opacity));
}
.page-404-wrapper img {
  height: 20rem;
}
